
import { useState } from 'react';
import { Settings, Database, Shield, Bell, Palette, Monitor, Save, RotateCcw } from 'lucide-react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Slider } from '@/components/ui/slider';
import { useToast } from '@/hooks/use-toast';

export default function SystemSettings() {
  const { toast } = useToast();
  const [audioSettings, setAudioSettings] = useState({
    sampleRate: [44100],
    bufferSize: [1024],
    channels: 'stereo',
    format: 'wav'
  });
  
  const [systemSettings, setSystemSettings] = useState({
    theme: 'dark',
    language: 'zh-CN',
    autoSave: true,
    notifications: true,
    maxConcurrentTasks: [4]
  });

  const [securitySettings, setSecuritySettings] = useState({
    sessionTimeout: [30],
    enableTwoFactor: false,
    allowRemoteAccess: true,
    logLevel: 'info'
  });

  const handleSave = (section: string) => {
    toast({
      title: "设置已保存",
      description: `${section}设置已成功保存`,
    });
  };

  const handleReset = (section: string) => {
    toast({
      title: "设置已重置",
      description: `${section}设置已重置为默认值`,
    });
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-2xl font-bold text-white">系统设置</h2>
          <p className="text-gray-400">系统配置与参数管理</p>
        </div>
        <div className="flex space-x-3">
          <Button variant="outline" size="sm">
            <RotateCcw className="w-4 h-4 mr-2" />
            重置全部
          </Button>
          <Button className="btn-primary">
            <Save className="w-4 h-4 mr-2" />
            保存全部
          </Button>
        </div>
      </div>

      <Card className="glass-card p-6">
        <Tabs defaultValue="system" className="space-y-6">
          <TabsList className="grid w-full grid-cols-5">
            <TabsTrigger value="system">系统设置</TabsTrigger>
            <TabsTrigger value="audio">音频设置</TabsTrigger>
            <TabsTrigger value="security">安全设置</TabsTrigger>
            <TabsTrigger value="notifications">通知设置</TabsTrigger>
            <TabsTrigger value="advanced">高级设置</TabsTrigger>
          </TabsList>

          <TabsContent value="system" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card className="glass-card p-6">
                <h3 className="text-lg font-semibold mb-4 text-white flex items-center">
                  <Monitor className="w-5 h-5 mr-2" />
                  界面设置
                </h3>
                
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">主题</label>
                    <Select value={systemSettings.theme} onValueChange={(value) => 
                      setSystemSettings(prev => ({ ...prev, theme: value }))
                    }>
                      <SelectTrigger className="input-advanced">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="dark">深色主题</SelectItem>
                        <SelectItem value="light">浅色主题</SelectItem>
                        <SelectItem value="auto">跟随系统</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">语言</label>
                    <Select value={systemSettings.language} onValueChange={(value) => 
                      setSystemSettings(prev => ({ ...prev, language: value }))
                    }>
                      <SelectTrigger className="input-advanced">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="zh-CN">中文简体</SelectItem>
                        <SelectItem value="en-US">English</SelectItem>
                        <SelectItem value="ja-JP">日本語</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="flex items-center justify-between">
                    <label className="text-sm font-medium text-gray-300">自动保存</label>
                    <Switch 
                      checked={systemSettings.autoSave}
                      onCheckedChange={(checked) => 
                        setSystemSettings(prev => ({ ...prev, autoSave: checked }))
                      }
                    />
                  </div>

                  <div className="flex items-center justify-between">
                    <label className="text-sm font-medium text-gray-300">系统通知</label>
                    <Switch 
                      checked={systemSettings.notifications}
                      onCheckedChange={(checked) => 
                        setSystemSettings(prev => ({ ...prev, notifications: checked }))
                      }
                    />
                  </div>
                </div>
              </Card>

              <Card className="glass-card p-6">
                <h3 className="text-lg font-semibold mb-4 text-white flex items-center">
                  <Settings className="w-5 h-5 mr-2" />
                  性能设置
                </h3>
                
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">
                      最大并发任务数: {systemSettings.maxConcurrentTasks[0]}
                    </label>
                    <Slider
                      value={systemSettings.maxConcurrentTasks}
                      onValueChange={(value) => 
                        setSystemSettings(prev => ({ ...prev, maxConcurrentTasks: value }))
                      }
                      max={16}
                      min={1}
                      step={1}
                      className="mt-2"
                    />
                  </div>

                  <div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-400">CPU 使用限制</span>
                      <span className="text-green-400">80%</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-400">内存使用限制</span>
                      <span className="text-blue-400">4GB</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-400">磁盘缓存大小</span>
                      <span className="text-purple-400">1GB</span>
                    </div>
                  </div>
                </div>

                <div className="mt-6 pt-4 border-t border-gray-700">
                  <Button onClick={() => handleSave('系统')} className="btn-primary w-full">
                    保存系统设置
                  </Button>
                </div>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="audio" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card className="glass-card p-6">
                <h3 className="text-lg font-semibold mb-4 text-white">音频输入设置</h3>
                
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">
                      采样率: {audioSettings.sampleRate[0]} Hz
                    </label>
                    <Slider
                      value={audioSettings.sampleRate}
                      onValueChange={(value) => 
                        setAudioSettings(prev => ({ ...prev, sampleRate: value }))
                      }
                      max={96000}
                      min={8000}
                      step={1000}
                      className="mt-2"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">
                      缓冲区大小: {audioSettings.bufferSize[0]}
                    </label>
                    <Slider
                      value={audioSettings.bufferSize}
                      onValueChange={(value) => 
                        setAudioSettings(prev => ({ ...prev, bufferSize: value }))
                      }
                      max={4096}
                      min={256}
                      step={256}
                      className="mt-2"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">声道配置</label>
                    <Select value={audioSettings.channels} onValueChange={(value) => 
                      setAudioSettings(prev => ({ ...prev, channels: value }))
                    }>
                      <SelectTrigger className="input-advanced">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="mono">单声道</SelectItem>
                        <SelectItem value="stereo">立体声</SelectItem>
                        <SelectItem value="5.1">5.1 环绕</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">音频格式</label>
                    <Select value={audioSettings.format} onValueChange={(value) => 
                      setAudioSettings(prev => ({ ...prev, format: value }))
                    }>
                      <SelectTrigger className="input-advanced">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="wav">WAV</SelectItem>
                        <SelectItem value="mp3">MP3</SelectItem>
                        <SelectItem value="flac">FLAC</SelectItem>
                        <SelectItem value="aac">AAC</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </Card>

              <Card className="glass-card p-6">
                <h3 className="text-lg font-semibold mb-4 text-white">音频处理设置</h3>
                
                <div className="space-y-4">
                  <div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-400">增益控制</span>
                      <span className="text-green-400">0 dB</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-400">噪声门限</span>
                      <span className="text-blue-400">-60 dB</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-400">压缩比</span>
                      <span className="text-purple-400">4:1</span>
                    </div>
                  </div>

                  <div className="pt-4 border-t border-gray-700">
                    <label className="block text-sm font-medium text-gray-300 mb-2">预设方案</label>
                    <Select defaultValue="standard">
                      <SelectTrigger className="input-advanced">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="standard">标准</SelectItem>
                        <SelectItem value="high-quality">高品质</SelectItem>
                        <SelectItem value="low-latency">低延迟</SelectItem>
                        <SelectItem value="custom">自定义</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                <div className="mt-6 pt-4 border-t border-gray-700">
                  <Button onClick={() => handleSave('音频')} className="btn-primary w-full">
                    保存音频设置
                  </Button>
                </div>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="security" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card className="glass-card p-6">
                <h3 className="text-lg font-semibold mb-4 text-white flex items-center">
                  <Shield className="w-5 h-5 mr-2" />
                  访问控制
                </h3>
                
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">
                      会话超时: {securitySettings.sessionTimeout[0]} 分钟
                    </label>
                    <Slider
                      value={securitySettings.sessionTimeout}
                      onValueChange={(value) => 
                        setSecuritySettings(prev => ({ ...prev, sessionTimeout: value }))
                      }
                      max={120}
                      min={5}
                      step={5}
                      className="mt-2"
                    />
                  </div>

                  <div className="flex items-center justify-between">
                    <label className="text-sm font-medium text-gray-300">启用双因素认证</label>
                    <Switch 
                      checked={securitySettings.enableTwoFactor}
                      onCheckedChange={(checked) => 
                        setSecuritySettings(prev => ({ ...prev, enableTwoFactor: checked }))
                      }
                    />
                  </div>

                  <div className="flex items-center justify-between">
                    <label className="text-sm font-medium text-gray-300">允许远程访问</label>
                    <Switch 
                      checked={securitySettings.allowRemoteAccess}
                      onCheckedChange={(checked) => 
                        setSecuritySettings(prev => ({ ...prev, allowRemoteAccess: checked }))
                      }
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">日志级别</label>
                    <Select value={securitySettings.logLevel} onValueChange={(value) => 
                      setSecuritySettings(prev => ({ ...prev, logLevel: value }))
                    }>
                      <SelectTrigger className="input-advanced">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="debug">调试</SelectItem>
                        <SelectItem value="info">信息</SelectItem>
                        <SelectItem value="warn">警告</SelectItem>
                        <SelectItem value="error">错误</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </Card>

              <Card className="glass-card p-6">
                <h3 className="text-lg font-semibold mb-4 text-white">数据安全</h3>
                
                <div className="space-y-4">
                  <div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-400">数据加密</span>
                      <span className="text-green-400">AES-256</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-400">备份频率</span>
                      <span className="text-blue-400">每天</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-400">保留时间</span>
                      <span className="text-purple-400">30天</span>
                    </div>
                  </div>

                  <div className="pt-4 border-t border-gray-700">
                    <Button variant="outline" className="w-full mb-2">
                      立即备份数据
                    </Button>
                    <Button variant="outline" className="w-full">
                      清理临时文件
                    </Button>
                  </div>
                </div>

                <div className="mt-6 pt-4 border-t border-gray-700">
                  <Button onClick={() => handleSave('安全')} className="btn-primary w-full">
                    保存安全设置
                  </Button>
                </div>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="notifications" className="space-y-6">
            <Card className="glass-card p-6">
              <h3 className="text-lg font-semibold mb-4 text-white flex items-center">
                <Bell className="w-5 h-5 mr-2" />
                通知设置
              </h3>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <h4 className="font-medium text-gray-300">系统通知</h4>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <label className="text-sm text-gray-400">系统启动</label>
                      <Switch defaultChecked />
                    </div>
                    <div className="flex items-center justify-between">
                      <label className="text-sm text-gray-400">系统错误</label>
                      <Switch defaultChecked />
                    </div>
                    <div className="flex items-center justify-between">
                      <label className="text-sm text-gray-400">性能警告</label>
                      <Switch defaultChecked />
                    </div>
                    <div className="flex items-center justify-between">
                      <label className="text-sm text-gray-400">更新提醒</label>
                      <Switch />
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="font-medium text-gray-300">任务通知</h4>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <label className="text-sm text-gray-400">录制完成</label>
                      <Switch defaultChecked />
                    </div>
                    <div className="flex items-center justify-between">
                      <label className="text-sm text-gray-400">处理完成</label>
                      <Switch defaultChecked />
                    </div>
                    <div className="flex items-center justify-between">
                      <label className="text-sm text-gray-400">训练完成</label>
                      <Switch defaultChecked />
                    </div>
                    <div className="flex items-center justify-between">
                      <label className="text-sm text-gray-400">定位结果</label>
                      <Switch />
                    </div>
                  </div>
                </div>
              </div>

              <div className="mt-6 pt-4 border-t border-gray-700">
                <Button onClick={() => handleSave('通知')} className="btn-primary w-full">
                  保存通知设置
                </Button>
              </div>
            </Card>
          </TabsContent>

          <TabsContent value="advanced" className="space-y-6">
            <Card className="glass-card p-6">
              <h3 className="text-lg font-semibold mb-4 text-white flex items-center">
                <Database className="w-5 h-5 mr-2" />
                高级设置
              </h3>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <h4 className="font-medium text-gray-300">数据库设置</h4>
                  <div className="space-y-3">
                    <div>
                      <label className="block text-sm font-medium text-gray-300 mb-2">连接池大小</label>
                      <Input className="input-advanced" defaultValue="10" />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-300 mb-2">查询超时 (秒)</label>
                      <Input className="input-advanced" defaultValue="30" />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-300 mb-2">备份路径</label>
                      <Input className="input-advanced" defaultValue="/data/backups" />
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="font-medium text-gray-300">网络设置</h4>
                  <div className="space-y-3">
                    <div>
                      <label className="block text-sm font-medium text-gray-300 mb-2">API 端口</label>
                      <Input className="input-advanced" defaultValue="8080" />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-300 mb-2">WebSocket 端口</label>
                      <Input className="input-advanced" defaultValue="8081" />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-300 mb-2">CORS 域名</label>
                      <Input className="input-advanced" defaultValue="*" />
                    </div>
                  </div>
                </div>
              </div>

              <div className="mt-6 pt-4 border-t border-gray-700 space-y-3">
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-400">调试模式</span>
                  <Switch />
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-400">开发者模式</span>
                  <Switch />
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-400">详细日志</span>
                  <Switch />
                </div>
              </div>

              <div className="mt-6 pt-4 border-t border-gray-700">
                <Button onClick={() => handleSave('高级')} className="btn-primary w-full">
                  保存高级设置
                </Button>
              </div>
            </Card>
          </TabsContent>
        </Tabs>
      </Card>
    </div>
  );
}
